<!--操作日志 SysLoginLog-->
<template>
  <div class='page_format'>
    <el-table :data="list" border style="width: 800px">
      <el-table-column prop="operTime" label="时间" ></el-table-column>
      <el-table-column prop="operatorAccount" label="账号" ></el-table-column>
      <el-table-column prop="operIp" label="IP"></el-table-column>
    </el-table>
    <div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { changSort } from '@/utils/aqi'

export default {
  name: '',
  data () {
    return {
      list: [],
      formLabelWidth: '140px',
      pageSize: 20,
      pageNum: 1,
      total: 0
    }
  },

  mounted () {
    this.getSysOperLog()
  },

  methods: {
    // 排序 （序号）
    sort (index) {
      return changSort(index, this.pageNum, this.pageSize)
    },

    getSysOperLog () {
      this.list = []
      this.$store.dispatch('getSysOperLog', {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }).then(res => {
        this.list = res.data
        this.total = res.total
      })
    },

    handleQuery () {
      this.pageNum = 1
      this.getSysOperLog()
    },

    handleSizeChange (val) {
      this.pageSize = val
      this.getSysOperLog()
    },

    handleCurrentChange (val) {
      this.pageNum = val
      this.getSysOperLog()
    }

  }
}
</script>

<style lang='scss'>
  .page_format {
    padding: 56px 20px 140px 20px;
  }
  .search-form{
    margin-top: 10px;
  }

  .icon-image {
    width: auto;
    height: auto;
    object-fit: cover;
  }
</style>
